<template>
  <div class="simple-tab fs14">
    <div class="tab-left">
      <div
        @click="selectTab(tab)"
        v-for="(tab,index) in tabs"
        :key="index"
        class="tab-item"
        :class="{active:activeValue==tab.value}"
      >
        <span v-if="tab.disabled" class="text-default">{{tab.label}}</span>
        <span v-else>{{tab.label}}</span>
        <p v-if="tab.value == activeValue"></p>
      </div>
    </div>
    <div class="tab-right">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: [String, Number]
  },
  data () {
    return {
      activeValue: ''
    }
  },
  watch: {
    value (val, oldVal) {
      this.activeValue = val
      this.$emit('oldChange', oldVal)
    }
  },
  created () {
    if (this.value) {
      this.activeValue = this.value
    }
  },
  methods: {
    selectTab (tab) {
      if (!tab.disabled) {
        this.activeValue = tab.value
        this.$emit('input', tab.value)
        this.$emit('change', tab.value)
      }
    }
  }
}
</script>
<style lang="scss">
  .empty-box{
    min-height: 100px;
  }
</style>
<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.simple-tab {
  border-bottom: 1px solid #e4e7ed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 20px;
  /*margin-top: 20px;*/
  margin-left: 20px;
  .tab-left {
    flex: 1;
  }
  .tab-left,
  .tab-right {
    display: flex;
    align-items: top;
  }
  .tab-item {
    font-size: 16px;
    padding: 5px 20px;
    color: #333333;
    cursor: pointer;
    p {
      width: 24px;
      height: 4px;
      background-color: $theme-primary;
      border-radius: 2px;
      margin: 5px auto 0;
    }
    &.active {
      color: $theme-primary;
      //font-weight: bold;
    }
  }
}
</style>
